<template>
  <el-form
    :label-position="labelPosition"
    label-width="100px"
    :model="searchForm"
    style="width: 100%"
  >
  <el-row :gutter="24">
    <el-col :xs="{span:24}" :sm="{span:12}" :md="{span:8}" :lg="{span:6}" :xl="{span:4}" v-for="(item, index) in isShowMoreCondition?staticCondition:staticCondition.slice(0,(24 / colNum))" :key="index">
        <el-form-item :label="item.label">
            <el-input :disabled="item.disabled" v-model="searchForm[item.key]" />
        </el-form-item>
    </el-col>

    <el-col style="height:80px" :span="(staticCondition.length < (24 / colNum)) ?colNum:isShowMoreCondition?(((24 / colNum) - staticCondition.length%(24 / colNum)) * colNum):24">
        <div class="search-button">
            <i v-show="staticCondition.length+1 > (24 / colNum)" 
                @click="isShowMoreCondition = !isShowMoreCondition" 
                :style="`transform:rotate(${isShowMoreCondition?'180deg':'0deg'})`" class="icon zbs-chevron-down-circle"></i>
            <el-button @click="doReset">重置</el-button>
            <el-button type="primary" @click="doSearch">查询</el-button>
        </div>
    </el-col>
  </el-row>
    
  </el-form>
</template>

<script lang="ts" setup>
import { onMounted, reactive, ref, computed, defineEmits, defineProps } from 'vue'
const isShowMoreCondition = ref(false)
// const staticCondition = reactive([1,2,3,4,5,6,7,8,9,10])
onMounted(()=>{
    colNumFun()
    window.addEventListener("resize",() => {
        colNumFun()
    });
})
let colNum = ref(6)
const colNumFun = () => {
    let clientWidth = document.documentElement.clientWidth
    let colNumObj = {
        xs:24,
        sm:12,
        md:8,
        lg:6,
        xl:4,
    }
    let key = ""
    if (clientWidth<768) {
        key = 'xs'
    } else if (768 <= clientWidth && clientWidth < 992) {
        key = 'sm'
    } else if (992 <= clientWidth && clientWidth < 1200) {
        key = 'md'
    } else if (1200 <= clientWidth && clientWidth < 1920) {
        key = 'lg'
    } else if (1920 <= clientWidth) {
        key = 'xl'
    }
    colNum.value = colNumObj[key]
}
// left,Right,Top
const labelPosition = ref('top')
const searchForm = ref({})

const prop = defineProps({
    conditionConfig:{
        type:Array,
        default: () => {
            // return [1,2,3,4,5,6,7,8,9,10]
            return [
                {key:"11",label:"字段1",type:"",op:"",options:[],disabled:false,display:true}
            ]
        }
    }
})

const staticCondition = computed(() => {
   
    console.log(prop.conditionConfig);
    
    return prop.conditionConfig.filter(i=>{
        return i['display']
    })
})

// 查询方法
const emits = defineEmits(['conditionSearch'])
const doReset = () => {
    searchForm.value = {}
    doSearch()
}
const doSearch = () => {  
    let searchKeys = Object.keys(searchForm)
    let conditions = staticCondition.value.map(item => {
        let { key, op } = item
        return {
            key,
            op,
            value:searchForm.value[key]
        }
    })
    emits('conditionSearch',conditions)
}
</script>
<style scoped>
.search-button{
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    margin-top:8px;
    justify-content: flex-end;
}
.icon{
    margin-right: 8px;
}
</style>